<template>
  <el-card>
    <div slot="header">
      <h3>商品多计量单位修改</h3>
    </div>
    <!-- 按钮操作栏 -->
    <BtnRender :render="renderBtnsBar" />
    <SkusTable
      showActionCol
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :tableHeight="480"
      :actionRender="renderTableBtnAction"
    />
    <GoodsLinkedDialog
      ref="goodsLinked"
      :visible.sync="dialogVisible"
      :queryTableData="queryLinkGoodsTableData"
      @getLinkedGoods="getTableDataByGoodsLinked"
    />
    <!-- 高级关联弹框 -->
    <SeniorLinkedDialog
      :visible.sync="seniorLinked.visible"
      :columns="seniorLinked.columns"
      :dataSource="seniorLinked.dataSource"
      @seniorSearchResult="getTableDataBySeniorLinked"
    />
  </el-card>
</template>
<script>
import BtnRender from '@/components/JSXRender/BtnRender';
import SkusTable from '@/components/skusTable';
import GoodsLinkedDialog from '@/pages/commodity/components/UnitsLinkGoodsDialog';
import SeniorLinkedDialog from '@/components/SeniorLinkedDialog';
import { getBtnsBar, getTableAction } from '@/utils/getBtnsRender';
import { TABLE_COLUMNS } from './constants/edit';
import { createExcelByExport, generateUuid, setAuthBtnId } from '@/utils/bizUtils';
import {
  getMultipleSkuUnitListService,
  exportMultipleUnitsService,
  submitMultipleUnitsService
} from '@/api/commodity/commodityManage/unitsManage';
export default {
  components: {
    BtnRender,
    SkusTable,
    GoodsLinkedDialog,
    SeniorLinkedDialog
  },
  data () {
    return {
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false
      },
      btnLoading: {
        export: false,
        submit: false
      },
      dialogVisible: false,
      seniorLinked: { // 高级关联
        visible: false,
        columns: [{
          label: 'SKU编码',
          prop: 'skuNo',
          type: 'textarea'
        }],
        dataSource: [{ skuNo: '' }]
      },
    }
  },
  computed: {
    isNullTable () {
      return this.tableInfo.list.length === 0;
    }
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const size = 'large'; // 按钮尺寸
      const btnsBar = [
        { label: '高级关联', method: this.handleSeniorLinked, size },
        { label: '关联商品', method: this.handleLinkGoods, size },
        {
          label: '模板导入',
          action: 'sysback/unitskurel/importMultiSkuUnit',
          methods: { handleUploadSuccess: this.handleUploadSuccess },
          isImport: true,
          loadingFn: (state) => { this.tableInfo.loading = state; }
        },
        {
          label: '模板导出',
          size,
          method: this.handleExportTemplate,
          loading: this.btnLoading.export,
          disabled: this.isNullTable
        },
        {
          label: '提交',
          size,
          method: this.handleSubmit,
          loading: this.btnLoading.submit,
          disabled: this.isNullTable
        },
        { label: '返回', method: this.handleGoBack, size }
      ];
      return getBtnsBar(h, btnsBar, 'end');
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [
        { label: '删除', method: this.handleDelete },
      ];
      return getTableAction({ h, row, actionList });
    },
    // 关联商品
    handleLinkGoods () {
      this.dialogVisible = true;
    },
    // 高级关联
    handleSeniorLinked () {
      this.seniorLinked.visible = true;
    },
    // 模板导入成功
    handleUploadSuccess (res) {
      this.tableInfo.loading = false;
      if (res.retStatus !== '1') {
        this.$message.error(res.retMessage || '导入失败');
        return false;
      }
      this.tableInfo.list = res.retData;
    },
    // 模板导出
    handleExportTemplate () {
      this.exportUnitsData();
    },
    // 提交
    handleSubmit () {
      this.submitUnitsData();
    },
    // 返回
    handleGoBack () {
      this.$router.push({ name: 'unitsManageList' });
    },
    // 删除
    handleDelete (row) {
      this.tableInfo.list = this.tableInfo.list.filter(item => item.skuNo !== row.skuNo);
      this.$refs.goodsLinked.GoodsLink.delete(row);
    },
    // 查询关联商品弹框表格数据
    async queryLinkGoodsTableData (formData, { nowPage, pageShow }, loadingFn) {
      setAuthBtnId('关联商品');
      const data = { ...formData, nowPage, pageShow };
      const retData = await getMultipleSkuUnitListService(data, loadingFn);
      return retData;
    },
    // 获取表格数据 by 关联商品
    getTableDataByGoodsLinked (linkedGoods) {
      if (!linkedGoods) {
        this.tableInfo.list = [];
        return false;
      }
      this.tableInfo.list = linkedGoods;
    },
    // 获取表格数据 by 高级关联
    async getTableDataBySeniorLinked (skuNos) {
      setAuthBtnId('高级关联');
      const data = { skuNos, nowPage: 1, pageShow: 1000 };
      const retData = await getMultipleSkuUnitListService(
        data,
        state => { this.tableInfo.loading = state }
      );
      this.$refs.goodsLinked.GoodsLink.clear();
      if (retData) {
        this.tableInfo.list = retData.results;
      }
    },
    // 导出计量单位数据
    async exportUnitsData () {
      const data = { multiSkuUnitParamList: this.tableInfo.list };
      const res = await exportMultipleUnitsService(
        data,
        state => { this.btnLoading.export = state; }
      );
      createExcelByExport({ res, excelTitle: `商品多计量单位修改_${generateUuid()}` });
    },
    // 提交计量单位数据
    async submitUnitsData () {
      const data = { multiSkuUnitParamList: this.tableInfo.list };
      const retStatus = await submitMultipleUnitsService(
        data,
        state => { this.btnLoading.submit = state; }
      );
      if (retStatus) {
        this.$message.success('提交成功');
        this.handleGoBack();
      }
    }
  }
}
</script>
